<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据表格 datagrid</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script type="text/javascript">
			$(function() {
				//页面加载后对datagrid进行设置
				$("#grid").datagrid({ //数组每一条数据,就代表一行表头数据,这里用到二维数组是因为表头数据可能有两层
					columns: [
						[{
							field: "id", //与json中数据名称对应
							title: "编号", //表头中显示的数据
							width: "100px" //表头中单元格宽度
						}, {
							field: "name", //与json中数据名称对应
							title: "名称", //表头中显示的数据
							width: "100px" //表头中单元格宽度
						}, {
							field: "price", //与json中数据名称对应
							title: "价格", //表头中显示的数据
							width: "100px" //表头中单元格宽度
						}]
					],
					url: "product.json", //加载json的数据文件
					pagination: true, //分页框
					toolbar: [ //一维数组,定义按钮
						{
							id: "saveBtn",
							text: "保存",
							iconCls: "icon-save",
							handler: function() {
								alert("保存...");
							}
						}
					]
				});
			});
		</script>
	</head>

	<body>
		<!--表格数据-->
		<table id="grid"></table>
	</body>

</html>